<template>
  <button v-if="data.method?.toUpperCase() === 'POST' && data.body.params"
    class="mx-[10px] py-2 px-6 bg-purple-950 shadow-lg shadow-purple-500/50 text-[12px] rounded-md font-bold"
    @click="copyStr(JSON.stringify(data.body.params))">
    query/body
  </button>
  <button class="mx-[10px] py-2 px-6 bg-purple-950 shadow-lg shadow-purple-500/50 text-[12px] rounded-md font-bold"
    @click="copyStr(data.url)">
    URL
  </button>
  <button v-if="data.body.response"
    class="mx-[10px] py-2 px-6 bg-purple-950 shadow-lg shadow-purple-500/50 text-[12px] rounded-md font-bold"
    @click="copyStr(JSON.stringify(data.body.response))">
    response
  </button>
  <button class="mx-[10px] py-2 px-6 bg-purple-950 shadow-lg shadow-purple-500/50 text-[12px] rounded-md font-bold"
    @click="(showJSON as Function)">
    JSON
  </button>
</template>

<script lang="ts" setup>
import { ComponentInternalInstance } from "vue";
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();

type logRequest = {
  label: string;
  url: string;
  method: string;
  body: any;
  time: number;
};
type propsType = {
  data: logRequest;
};

const props = withDefaults(defineProps<propsType>(), {
  data: {} as any,
});
const emits = defineEmits(["showJSON"]);
const { proxy } = getCurrentInstance() as any;
const data = computed(() => props.data);
const showJSON = () => {
  emits("showJSON", props.data);
};
const copyStr = (str: string) => {
  if (!str) return;
  if (navigator.clipboard) {
    navigator.clipboard.writeText(str || "").then(() => {
      proxy.$modal.msgSuccess("已复制剪切版~");
    });
  } else {
    toClipboard(str).then(() => {
      proxy.$modal.msgSuccess("已复制剪切版~");
    });
  }
};
</script>

<style lang="scss" scoped></style>
